<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="application/javascript" src="../template-web.js"></script>
        <script type="application/javascript" src="../../js/jquery.min.js"></script>
        <script type="text/javascript" src="ajaxMock.js"></script>
        <script type="application/javascript" src="../sh.table.1.0.5.js"></script>
        <link type="text/css" rel="stylesheet" href="../../css/defaultStyle.css">
        <link type="text/css" rel="stylesheet" href="../../css/bootstrap.min.css">
        <link type="text/css" rel="stylesheet" href="../../css/page.css">
        <script type="text/javascript" src="../js-pager-bootstrap.js"></script>
        <script type="text/javascript" src="demo.js"></script>
    </head>
    <body>
    <table class="ui table sop-table-normal">
        <colgroup>
            <col />
            <col style="width: 1000px;"/>
            <col />
            <col />
        </colgroup>

        <thead>
        <tr>
            <th >例子</th>
            <th >效果</th>
            <th >js</th>
            <th >模板</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>分页</td>
            <td style="width: 1000px">
                <span style="color: #FFA200">打开控制台查看</span>
                <a href="javascript:void(0)" id="btn1" class="medium ui blue button">
                    获取选中key
                </a>
                <a href="javascript:void(0)" id="btn2" class="medium ui blue button">
                    获取选中对象
                </a>
                <div style="width: 800px">
                    <div id="tableEl"></div>
                    <script type="text/html" id="table">
                        <thead>
                        <tr>
                            <th><input  openCheck="true" type="checkbox"></th>

                            <th>角色编码</th>
                            <th>角色名称</th>
                            <th>角色描述</th>
                            <th>查看</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><input type="checkbox" openCheck="true"></td>
                            <td>{{row.userCode}}</td>
                            <td>{{row.userName}}</td>
                            <td>{{row.desc}}</td>
                            <td><span tableEvent="{type: 'click', fun:'view'}"
                                      style="cursor: pointer">查看</span></td>
                        </tr>
                        </tbody>
                    </script>
                </div>

            </td>
            <td>
                <xmp class="beautify">
                    table({
                    templateId: "table",
                    rowKey: "userCode",
                    data: [],
                    cascade: true,
                    ajax: {
                    method: mockDataService.list,
                    /*参数构造器*/
                    paramBuilder: function () {
                    console.log("default paramBuilder!");
                    return {};
                    }
                    },
                    pagination: {
                    /*是否ajax分页*/
                    open: true,
                    pagesize: 10
                    },
                    tableEvent: {
                    view: function (tableObj, row) {
                    console.log(JSON.stringify(row))
                    }
                    },
                    initSuccess: function (obj) {
                    $("#btn1").click(function () {
                    console.log(JSON.stringify(obj.getCheckedKeys()));
                    })
                    $("#btn2").click(function () {
                    console.log(JSON.stringify(obj.getCheckedRecursions()));
                    })
                    }
                    });
                </xmp>
            </td>
            <td>
                <xmp >
                    <script type="text/html" id="table ">
                        <thead>
                        <tr>
                            <th><input  openCheck="true" type="checkbox"></th>

                            <th>角色编码</th>
                            <th>角色名称</th>
                            <th>角色描述</th>
                            <th>查看</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><input type="checkbox" openCheck="true"></td>
                            <td>{{row.userCode}}</td>
                            <td>{{row.userName}}</td>
                            <td>{{row.desc}}</td>
                            <td><span tableEvent="{type: 'click', fun:'view'}"
                                      style="cursor: pointer">查看</span></td>
                        </tr>
                        </tbody>
                    </script>
                </xmp>
            </td>
        </tr>
        <tr>
            <td>不分页</td>
            <td>
                <script type="text/html" id="tableNoPage">
                    <thead>
                    <tr>
                        <th><input  openCheck="true" type="checkbox"></th>
                        <th>角色编码</th>
                        <th>角色名称</th>
                        <th>角色描述</th>
                        <th>查看</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr>
                        <td><input type="checkbox" openCheck="true"></td>

                        <td>{{row.userCode}}</td>
                        <td>{{row.userName}}</td>
                        <td>{{row.desc}}</td>
                        <td><span tableEvent="{type: 'click', fun:'view'}"
                                  style="cursor: pointer">查看</span></td>
                    </tr>
                    </tbody>
                </script>
            </td>
            <td>
                <xmp class="beautify">
                    table({
                    templateId: "tableNoPage",
                    data: data, rowKey: "userCode",
                    pagination: {
                    /*是否ajax分页*/
                    open: false,
                    pagesize: 10
                    },
                    tableEvent: {
                    view: function (tableObj, row) {
                    console.log(JSON.stringify(row))
                    }
                    }
                    });
                </xmp>
            </td>
            <td>
                <xmp >
                    <script type="text/html" id="tableNoPage ">
                        <thead>
                        <tr>
                            <th>
                                <div class="sop-checkbox checkbox">
                                    <input type="checkbox">
                                    <label><span>商品信息</span></label>
                                </div>
                            </th>
                            <th>售价(元)</th>
                            <th class="inventory-th">库存</th>
                            <th></th>
                        </tr>
                        </thead>

                        <tbody>
                        <tr>
                            <td><input type="checkbox" openCheck="true"></td>

                            <td>{{row.userCode}}</td>
                            <td>{{row.userName}}</td>
                            <td>{{row.desc}}</td>
                            <td><span tableEvent="{type: 'click', fun:'view'}"
                                      style="cursor: pointer">查看</span></td>
                        </tr>
                        </tbody>
                    </script>
                </xmp>
            </td>
        </tr>
        <tr>
            <td>纯前端分页</td>
            <td>
                <script type="text/html" id="dataDemo">
                    <thead>
                    <tr>
                        <th><input  openCheck="true" type="checkbox"></th>
                        <th>角色编码</th>
                        <th>角色反转</th>
                        <th>角色名称</th>
                        <th>角色描述</th>
                        <th>查看</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><input type="checkbox" openCheck="true"></td>
                        <td>{{row.userCode}}</td>
                        <td>{{row.userCode|reverse}}</td>
                        <td>{{row.userName}}</td>
                        <td>{{row.desc}}</td>
                        <td><span tableEvent="{type: 'click', fun:'view'}"
                                  style="cursor: pointer">查看</span></td>
                    </tr>
                    </tbody>
                </script>
            </td>
            <td>
                <xmp class="beautify">
                    table({
                    templateId: "dataDemo", rowKey: "userCode",
                    filters: {
                    reverse: function (v) {
                    return v.split("").reverse().join("");
                    }
                    },
                    pagination: {
                    /*是否ajax分页*/
                    open: true,
                    pagesize: 10
                    },
                    data: data,
                    tableEvent: {
                    view: function (tableObj, row) {
                    alert(JSON.stringify(row))
                    }
                    }
                    });
                </xmp>
            </td>
            <td>
                <xmp >
                    <script type="text/html" id="dataDemo ">
                        <thead>
                        <tr>
                            <th><input  openCheck="true" type="checkbox"></th>
                            <th>角色编码</th>
                            <th>角色名称</th>
                            <th>角色描述</th>
                            <th>查看</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><input type="checkbox" openCheck="true"></td>
                            <td>{{row.userCode}}</td>
                            <td>{{row.userCode|reverse}}</td>
                            <td>{{row.userName}}</td>
                            <td>{{row.desc}}</td>
                            <td><span tableEvent="{type: 'click', fun:'view'}"
                                      style="cursor: pointer">查看</span></td>
                        </tr>
                        </tbody>
                    </script>
                </xmp>
            </td>
        </tr>

        <tr>
            <td>hbase分页</td>
            <td>
                <script type="text/html" id="hbasetable">
                    <thead>
                    <tr>
                        <th><input  openCheck="true" type="checkbox"></th>
                        <th>角色编码</th>
                        <th>角色名称</th>
                        <th>角色描述</th>
                        <th>查看</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><input type="checkbox" openCheck="true"></td>

                        <td>{{row.userCode}}</td>
                        <td>{{row.userName}}</td>
                        <td>{{row.desc}}</td>
                        <td><span tableEvent="{type: 'click', fun:'view'}"
                                  style="cursor: pointer">查看</span></td>
                    </tr>
                    </tbody>
                </script>
            </td>
            <td>
                <xmp class="beautify">
                    table({
                    templateId: "hbasetable", rowKey: "userCode",
                    data: [],
                    ajax: {
                    method: mockDataService.list,
                    /*参数构造器*/
                    paramBuilder: function () {
                    console.log("default paramBuilder!");
                    return {};
                    }
                    },
                    pagination: {
                    /*是否ajax分页*/
                    open: true,
                    pagesize: 5,
                    pageModel: "3"
                    },
                    tableEvent: {
                    view: function (tableObj, row) {
                    console.log(JSON.stringify(row))
                    }
                    }
                    });
                </xmp>
            </td>
            <td>
                <xmp >
                    <script type="text/html" id="hbasetable ">
                        <thead>
                        <tr>
                            <th><input type="checkbox" openCheck="true"></th>

                            <th>角色编码</th>
                            <th>角色名称</th>
                            <th>角色描述</th>
                            <th>查看</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><input type="checkbox" openCheck="true"></td>

                            <td>{{row.userCode}}</td>
                            <td>{{row.userName}}</td>
                            <td>{{row.desc}}</td>
                            <td><span tableEvent="{type: 'click', fun:'view'}"
                                      style="cursor: pointer">查看</span></td>
                        </tr>
                        </tbody>
                    </script>
                </xmp>
            </td>
        </tr>

        <tr>
            <td>可编辑表格</td>
            <td>
                <button id="editDataPrint">控制台打印表格数据</button>
                <script type="text/html" id="editTable">
                    <thead>
                    <tr>
                        <th><input  openCheck="true" type="checkbox"></th>
                        <th>角色编码</th>
                        <th>角色名称</th>
                        <th>角色描述</th>
                        <th>查看</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><input type="checkbox" openCheck="true"></td>

                        <td>{{row.userCode}}</td>
                        <td><input v2m-model="userName" min="1" value="{{row.userName}}" type="text"></td>
                        <td>{{row.desc}}</td>
                        <td><span tableEvent="{type: 'click', fun:'view'}"
                                  style="cursor: pointer">查看</span></td>
                    </tr>
                    </tbody>
                </script>
            </td>
            <td>
                <xmp class="beautify">
                    table({
                    templateId: "editTable", rowKey: "userCode",
                    filters: {
                    reverse: function (v) {
                    return v.split("").reverse().join("");
                    }
                    },
                    pagination: {
                    /*是否ajax分页*/
                    open: true,
                    pagesize: 10
                    },
                    data: data,
                    tableEvent: {
                    view: function (tableObj, row) {
                    alert(JSON.stringify(row))
                    }
                    }
                    });
                </xmp>
            </td>
            <td>
                <xmp >
                    <script type="text/html" id="editTable ">
                        <thead>
                        <tr>
                            <th><input  openCheck="true" type="checkbox"></th>
                            <th>角色编码</th>
                            <th>角色名称</th>
                            <th>角色描述</th>
                            <th>查看</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><input type="checkbox" openCheck="true"></td>

                            <td>{{row.userCode}}</td>
                            <td><input v2m-model="userName" min="1" value="{{row.userName}}" type="text"></td>
                            <td>{{row.desc}}</td>
                            <td><span tableEvent="{type: 'click', fun:'view'}"
                                      style="cursor: pointer">查看</span></td>
                        </tr>
                        </tbody>
                    </script>
                </xmp>
            </td>
        </tr>
        </tbody>
    </table>
    </body>
</html>